import React from 'react'
import { useEffect,} from 'react'
import E from 'wangeditor'

// import { MyWriteBoardMenu } from './extendMenu/WriteBoardMenu'
import './index.scss'

/**
 * @param setState 设置内容的setState
 * @param placeholder 提示
 */

const TextEditor = ({
  setState,
  editor,
  placeholder,
  menusItem,
  onFocus,
  onBlur,
}: {
  setState: React.Dispatch<React.SetStateAction<string>>
  editor:E
  placeholder?: string
  menusItem?: string[]
  onFocus?: () => any
  onBlur?: () => any
}) => {
  const Emotions_Url =
    'https://gsp0.baidu.com/5aAHeD3nKhI2p27j8IqW0jdnxx1xbK/tb/editor/images/client'
  useEffect(() => {
    // const editor = new E('.editor')

    if (menusItem) {
      editor.config.menus = menusItem
    }
    editor.config.emotions = [
      ...editor.config.emotions,
      {
        title: '百度', // tab 的标题
        type: 'image', // 'emoji' 或 'image' ，即 emoji 形式或者图片形式
        content: [
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon38.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon37.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon36.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon35.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon34.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon33.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon32.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon31.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon30.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon29.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon28.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon27.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon26.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon25.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon24.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon23.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon22.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon21.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon20.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon19.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon18.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon17.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon16.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon15.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon14.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon13.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon12.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon11.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon10.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon9.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon8.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon7.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon6.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon5.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon4.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon3.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon2.png` },
          { alt: '[滑稽]', src: `${Emotions_Url}/image_emoticon1.png` },
        ],
      },
    ]
    editor.config.showFullScreen = false
    editor.config.placeholder = placeholder || ''
    editor.config.onchange = (newHtml: string) => {
      setState(newHtml)
    }
    editor.create()
  }, [placeholder,menusItem,setState])
  return (
    <>
      <div>
        <div
          className="editor"
          onFocus={() => onFocus && onFocus()}
          onBlur={() => onBlur && onBlur()}
        ></div>
      </div>
    </>
  )
}

export default TextEditor
